<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:include="header">
	<title>用户管理-编辑</title>
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="ibox-content">
			<form id="fm" class="form-horizontal" data-validator-option="{timely:8, focusCleanup:true, theme:'simple_bottom'}">
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
				<input type="hidden" name="id" th:value="${user.id}" />
				<div class="form-group">
					<label class="col-sm-3 control-label">用户名</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="loginName" th:value="${user.loginName}" data-rule="登录名:required;length(2~16)">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">姓名</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="name" th:value="${user.name}" data-rule="用户名:required;length(2~16)">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">密码</label>
					<div class="col-sm-8">
						<input type="password" class="form-control" name="password" data-rule="密码:length(2~16)">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">手机号</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="phone" th:value="${user.phone}" data-rule="手机号:required;integer[+0];length(11)">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">邮箱</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="email" th:value="${user.email}" data-rule="邮箱:required;email">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">性别</label>
					<div class="col-sm-8">
						<select id="sex" class="form-control" name="sex" data-rule="性别:required;">
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">年龄</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="age" th:value="${user.age}" data-rule="年龄:integer[+0],range[~127]">
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">用户类型</label>
					<div class="col-sm-8">
						<select id="userType" class="form-control" name="userType" data-rule="用户类型:required;">
							<option value="0">超级用户</option>
							<option value="1">企业用户</option>
						</select>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">用户状态</label>
					<div class="col-sm-8">
						<select class="form-control" name="status" data-rule="用户状态:required;">
							<option value="0" selected="selected" th:if="${user.status==0}">正常</option>
							<option value="1" selected="selected" th:if="${user.status==1}">停用</option>
							<option value="0">正常</option>
							<option value="1">停用</option>
						</select>
					</div>
				</div>
				<input type="hidden" name="expired}" value="0" />
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">企业部门</label>
					<div class="col-sm-8">
						<input type="hidden" id="organizationId" name="organizationId" th:value="${user.organizationId}">
						<input id="organizationName" class="form-control" name="organizationName" th:value="${user.organizationName}" readonly="readonly" onclick="UserInfoDlg.showDeptSelectTree(); return false;"/>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label">所属企业</label>
					<div class="col-sm-8">
						<select id="enterpriseId" class="form-control" name="enterpriseId" data-rule="所属企业:required;">
						</select>
					</div>
				</div>
				<div class="hr-line-dashed"></div>
				<div class="form-group">
					<div class="text-center">
						<button class="btn btn-primary" type="submit">保存</button>
						<button class="btn btn-white" type="reset">重置</button>
					</div>
				</div>
			</form>

			<!--部门选择的下拉框 -->
			<div id="menuContent" class="menuContent" style="display: none; position: absolute; z-index: 200;background-color: #ffffff !important;">
				<ul id="deptTree" class="ztree tree-box" style="width: 249px !important;"></ul>
			</div>
		</div>
	</div>
	<div th:include="footer"></div>
	<script type="text/javascript" th:inline="javascript">
        $(function(){
            var enterpriseId = [[${user.enterpriseId}]];
            var enterpriseIdArray=[];
            if(enterpriseId!=null){
                enterpriseIdArray.push(enterpriseId);
            }
            var select2List= new Select2List('enterpriseId', basePath+"enterprise/select2Tree");
            select2List.setPlaceholder("选择企业");
            select2List.setArrayObj(enterpriseIdArray);
            select2List.init();
        });

        $(function(){
            var sex = [[${user.sex}]];
            var userType = [[${user.userType}]];
            //性别下拉框选择
            if (sex == 0) {
                $("#sex option[value='" + sex + "']").attr("selected", "selected");
            }else {
                $("#sex option[value='" + sex + "']").attr("selected", "selected");
            }
            //用户类型下拉框选择
            if (userType == 0) {
                $("#userType option[value='" + userType + "']").attr("selected", "selected");
            } else {
                $("#userType option[value='" + userType + "']").attr("selected", "selected");
            }

        });
        var UserInfoDlg = {};
		/**
		 * 点击部门input框时
		 *
		 * @param e
		 * @param treeId
		 * @param treeNode
		 * @returns
		 */
		UserInfoDlg.onClickDept = function (e, treeId, treeNode) {
            $("#organizationId").attr("value", treeNode.id);
            $("#organizationName").attr("value", treeNode.name);
		};

		/**
		 * 显示部门选择的树
		 *
		 * @returns
		 */
		UserInfoDlg.showDeptSelectTree = function () {
			var cityObj = $("#organizationId");
			var cityOffset = $("#organizationId").offset();
			$("#menuContent").css({
				left: cityOffset.left + "px",
				top: cityOffset.top + cityObj.outerHeight() + "px"
			}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		};

		/**
		 * 隐藏部门选择的树
		 */
		UserInfoDlg.hideDeptSelectTree = function () {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);// mousedown当鼠标按下就可以触发，不用弹起
		};

		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
				event.target).parents("#menuContent").length > 0)) {
				UserInfoDlg.hideDeptSelectTree();
			}
		}

		$(function () {
            var ztree = new $ZTree("deptTree", basePath + "organization/tree");
            ztree.bindOnClick(UserInfoDlg.onClickDept);
            ztree.init();


			$("#fm").validator({
				valid: function (form) {
					var me = this;
					// 提交表单之前，hold住表单，防止重复提交
					me.holdSubmit();
					$.ajax({
						url: basePath + "user/edit",
						data: $(form).serialize(),
						type: "POST",
						dataType: 'json',
						success: function (data) {
	                        if (data.success) {
	                            var index = parent.layer.getFrameIndex(window.name);
	                            parent.layer.msg(data.msg,{
	                            	  icon: 1,
	                            	  time: 2000 //2秒关闭（如果不配置，默认是3秒）
	                            	},function () {
	                            	window.parent.location.reload();
	                                parent.layer.close(index);
	                            });
	                            
	                        } else {
	                        	parent.layer.msg(data.msg,{
	                          	  icon: 2,
	                        	  time: 2000 //2秒关闭（如果不配置，默认是3秒）
	                        	});
	                            me.holdSubmit(false);
	                        }
	                    }
					});
				}
			});
		});
	</script>
</body>

</html>